<template>
  <div class="addGift">
    <div class="ele-title"><h4>活动详情</h4></div>
    <div v-show="pane===giftCount" class="ele-info">
      <el-col :span="4"><el-button type="text">胎心监护仪T12活动</el-button></el-col>
      <el-col :span="1" class="el-col-offset-1">满减</el-col>
      <el-col :span="6" class="el-col-offset-2">开始时间:2019-06-24 12:00</el-col>
      <el-col :span="4" class="el-col-offset-2">结束时间:2019-06-24 12:00</el-col>
    </div>
    <div class="tab-button">
      <el-col :span="2"><el-button type="infor" class="changeBtn" :class="activeTab==='activeDetail'?'active-tab':''" @click="tabShow('activeDetail')">活动详情</el-button></el-col>
      <el-col :span="2"><el-button type="infor" class="changeBtn" :class="activeTab==='activeCount'?'active-tab':''" @click="tabShow('activeCount')">活动统计</el-button></el-col>
    </div>
    <div class="ele-content">
      <keep-alive>
        <component
          :is="comp"
          v-show="isShow"
        />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import giftProfile from './template/giftProfile.vue'
import giftCount from './template/giftCount.vue'
export default {
  name: 'GiftDetail',
  components: { giftProfile, giftCount },
  data() {
    return {
      activeTab: 'activeDetail',
      comp: 'giftProfile',
      isShow: true
    }
  },
  methods: {
    tabShow(value) {
      if (this.activeTab === value) {
        this.activeTab = 0
        this.isShow = !this.isShow
      } else {
        this.activeTab = value
        this.isShow = true
      }
      if (value === 'activeDetail') this.comp = 'giftProfile'
      if (value === 'activeCount') this.comp = 'giftCount'
    }
  }
}
</script>

<style lang="scss" scoped>
.addGift {
  padding: 0px 100px;
  .ele-title {
    margin: 40px 0px;
  }
  .ele-info{
    height: 40px;
  }
  .commodity-table-head{
    height: 36px;
    background: #F3F3F3;
  }
  .headColor{
    background: #F3F3F3;
  }
  ::v-deep.el-table th{
    background: #F3F3F3;
  }
  .left-space{
    padding-left: 66px;
  }
  .activeShop-div-head{
    justify-content: space-between;
  }
  .button-left-space{
    margin-left: 66px;
  }
}
.flex{
  display: flex;
}

</style>
